<template>
  <div class='navAll'>
    <div class="box1">
      <div v-for='(item,index) in logo' :key='index'>
        <div class="bg" :style='{backgroundImage:"url("+item.pho+")"}'></div>
        <div class="txt">{{item.name}}</div>
      </div>
    </div>
    <div class="box2">
      <div class="top">
        <div class="left">
          <div>
            <div>主题游</div>
            <span>个性独创</span>
          </div>
        </div>
        <div class="right">
          <div v-for="(item,index) in logo2" :key='index' :style='{backgroundImage:"url("+item.pho+")"}'>{{item.name}}</div>
        </div>
      </div>
      <div class="bottom">
        <div v-for='(item,index) in logo3' :key='index' :style='{backgroundImage:"url("+item.pho+")"}'>{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavAll',
  data () {
    return {
      logo: [
        {
          pho: '/static/Home/logo1.png',
          name: '周边游'
        },
        {
          pho: '/static/Home/logo2.png',
          name: '国内游'
        },
        {
          pho: '/static/Home/logo3.png',
          name: '出境游'
        },
        {
          pho: '/static/Home/logo4.png',
          name: '自由行'
        },
        {
          pho: '/static/Home/logo5.png',
          name: '酒店民俗'
        }
      ],
      logo2: [
        {
          pho: '/static/Home/logo2.2.png',
          name: '亲子游'
        },
        {
          pho: '/static/Home/logo2.3.png',
          name: '摄影游'
        },
        {
          pho: '/static/Home/logo2.4.png',
          name: '摄影游'
        },
        {
          pho: '/static/Home/logo2.3.png',
          name: '摄影游'
        },
        {
          pho: '/static/Home/logo2.2.png',
          name: '摄影游'
        },
        {
          pho: '/static/Home/logo2.2.png',
          name: '摄影游'
        }
      ],
      logo3: [
        {
          pho: '/static/Home/logo2.5.png',
          name: '定制游'
        },
        {
          pho: '/static/Home/logo2.6.png',
          name: '签证'
        },
        {
          pho: '/static/Home/logo2.7.png',
          name: '邮轮'
        },
        {
          pho: '/static/Home/logo2.6.png',
          name: '美宿度假'
        }
      ]
    }
  }
}
</script>
<style scoped lang='less'>
.navAll{
  margin-top:40px;
  .box1{
    width: 100%;
    display: flex;
    justifu-content:space-between;
    &>div{
      width: 20%;
      .bg{
        height: 45px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
    }
  }
  .box2{
    padding:10px;
    font-weight: bold;
    .top{
      display: flex;
      height: 100px;
      border-bottom: 1px solid transparent;
      &>div{
        // border:1px solid red;
      }
      .left{
        width: 25%;
        background-image: url(/static/Home/logo2.1.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        &>div{
          margin:30px 0;
          height: 40px;
          &>div{
            font-size:16px;
          }
          &>span{
            background-color: #ffd800;
            border-radius:50px;
          }
        }
      }
      .right{
        width: 75%;
        display: flex;
        flex-wrap:wrap;
        &>div{
          font-size:16px;
          width: 33.3%;
          height: 49.5px;
          line-height: 50px;
          box-sizing:border-box;
          // border:1px solid red;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
        &>div:nth-child(1),&>div:nth-child(2),&>div:nth-child(3){
          border-bottom:1px solid transparent;
        }
      }
    }
    .bottom{
      width: 100%;
      display: flex;
      &>div{
        width: 25%;
        height: 50px;
        line-height:50px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
    }
  }
}
</style>
